<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>指令</title>
  <style>
    .a{position: absolute;width: 100px;height: 100px;background: aquamarine}
  </style>
</head>
<body>
<div id="app">
  <button v-color="flag">变色</button>
  <div v-drag class="a"></div>
</div>

</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  //1.使用变量时需要初始化，否则新加的属性不会导致页面刷新
  let vm = new Vue({
    directives:{
      color(el,bindings){  //el指代的是button的按钮
        console.log(arguments);
        el.style.background = bindings.value
      },
      drag(el){
        el.onmousedown = function (e) {
          var disx = e.pageX - el.offsetLeft;
          var disy = e.pageY - el.offsetTop;
          document.onmousemove = function (e) {
            el.style.left = e.pageX - disx+'px';
            el.style.top = e.pageY - disy + 'px';
          }

          document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null;
            e.preventDefault();
          }

        }
      }
    },
    el: '#app',
    data: {
      flag:'red'
    }
  })

</script>
</html>
